<template>
    <div>

      <!--搜索部分-->
      <el-card>

        <el-form inline label-width="90px" size="mini" class="demo-form-inline">

          <el-form-item label="标题">
            <el-input placeholder="请输入标题" v-model.trim="searchParam.title" clearable size="mini"></el-input>
          </el-form-item>

          <el-form-item label="内容">
            <el-input placeholder="请输入内容" v-model.trim="searchParam.content" clearable size="mini"></el-input>
          </el-form-item>

          <el-form-item label="记事类型">
            <el-select v-model="searchParam.typeId" placeholder="请选择记事类型" clearable>
              <el-option
                v-for="item in notepadTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="重要程度">
            <el-select v-model="searchParam.importance" placeholder="请选择重要程度" clearable>
              <el-option label="核心级" :value="0"></el-option>
              <el-option label="重要紧急" :value="1"></el-option>
              <el-option label="不重要但紧急" :value="2"></el-option>
              <el-option label="重要但不紧急" :value="3"></el-option>
              <el-option label="不重要不紧急" :value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini" @click="getNotepadListPage">查询</el-button>
            <el-button type="warning" size="mini" @click="resetQueryNotepad">重置</el-button>
            <el-button type="warning" size="mini" @click="openSaveNotepad">新增</el-button>
          </el-form-item>

        </el-form>

      </el-card>


      <!--列表-->
      <el-card class="box-card">
        <el-tabs type="card" @tab-click="handleClick" v-model="discard" style="height: 640px; max-height: 640px;">
          <el-tab-pane name="1">
            <span slot="label"><i class="el-icon-date"></i> 进行中</span>

            <ul class="noteUl">
              <li class="noteLi"  v-for = "(notepad,index) in notepadListRun">
                <div class="noteDiv" @click="toOpenNotepadDetails(notepad)">
                  <a href="#" class="noteA" :class="setClass(notepad.importance)" :style="{ background:notepad.flagColour != null? notepad.flagColour:'' }">
                    <h2 class="noteH2">{{getTime(notepad.createTime)}}</h2>
                    <p class="noteP">{{notepad.title | ellipsis}}</p>
                  </a>
                </div>
              </li>


              <!--<li>-->
              <!--  <a href="#">-->
              <!--    &lt;!&ndash; 上面的盖子 &ndash;&gt;-->
              <!--    <div class="pin">-->
              <!--      &lt;!&ndash; 针头下的阴影 &ndash;&gt;-->
              <!--      <div class="shadow"></div>-->
              <!--      &lt;!&ndash; 便签的针 &ndash;&gt;-->
              <!--      <div class="metal"></div>-->
              <!--      &lt;!&ndash; 便签针帽一级 &ndash;&gt;-->
              <!--      <div class="bottom-circle"></div>-->
              <!--    </div>-->

              <!--    <h2>Title #1</h2>-->
              <!--    <p>Text Content #1</p>-->
              <!--  </a>-->
              <!--</li>-->
            </ul>

          </el-tab-pane>

          <el-tab-pane name="2">
            <span slot="label"><i class="el-icon-coffee-cup"></i> 已完成</span>

            <ul class="noteUl">
              <li class="noteLi"  v-for = "(notepad,index) in notepadListStop">
                <div class="noteDiv" @click="toOpenNotepadDetails(notepad)">
                  <a href="#" class="noteA" :class="setClass(notepad.importance)" :style="{ background:notepad.flagColour != null? notepad.flagColour:'' }">
                    <h2 class="noteH2">{{getTime(notepad.createTime)}}</h2>
                    <p class="noteP">{{notepad.title | ellipsis}}</p>
                  </a>
                </div>
              </li>
            </ul>

          </el-tab-pane>


        </el-tabs>

        <!--分页部分-->
        <el-pagination
          style="width:33%; margin-right:10px; margin-top:10px; "
          background
          layout="total, prev, pager, next, jumper"
          @current-change="notepadPageCurrentChange"
          :page-size="pageConfig.size"
          :current-page="pageConfig.current"
          :pager-count="5"
          :total="pageConfig.total">
        </el-pagination>
      </el-card>

      <NotepadSaveUpd ref="notepadSaveUpdRef" @getNotepadListPage="getNotepadListPage"/>
      <NotepadDetails ref="notepadDetailsRef" @getNotepadListPage="getNotepadListPage" @openUpdNotepad="openUpdNotepad"/>

    </div>
</template>

<script>

  import http from '@/utils/http'
  import NotepadSaveUpd from './NotepadSaveUpd'
  import NotepadDetails from './NotepadDetails'
  import {checkNull, getFullTime} from "../../utils/utils";


  export default {
    // cnpm install mavon-editor --save
    name: "NotepadList",
    components: {
      NotepadSaveUpd,
      NotepadDetails,
    },
    data(){
      return {
        // 查询参数
        searchParam: {
          title: null,
          content: null,
          importance: null,
          typeId: null,
        },
        // 分页参数
        pageConfig: {
          // 每页记录数
          size: 8,
          // size: 32,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
        // 是否废弃，默认未废弃
        discard: '1',
        // 记事类型
        notepadTypeList: [],
        // 记事本列表-进行中
        notepadListRun: [],
        // 记事本类型-已停止
        notepadListStop: [],
      }
    },
    /**
     * 过滤器
     */
    filters: {
      /**
       * 数据超过长度显示省略号
       * @param value
       * @return {string|*}
       */
      ellipsis(value) {
        if (!value) return "";
        if (value.length > 70) {
          return value.slice(0, 70) + "...";
        }
        return value;
      }
    },
    methods: {
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      notepadPageCurrentChange(value){
        this.pageConfig.current = value
        this.getNotepadListPage()
      },
      /**
       * 标签页被点击
       */
      handleClick(tab, event){
        // console.log(tab.name);
        this.getNotepadListPage()
      },
      /**
       * 根据条件分页查询记事本
       */
      getNotepadListPage(){
        this.searchParam.current = this.pageConfig.current
        this.searchParam.size = this.pageConfig.size
        this.searchParam.discard = this.discard

        http.post("/notepad/getNotepadListPage", this.searchParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.total = data.total;
          this.pageConfig.current = data.current;
          this.pageConfig.size = data.size;
          // 处理数据
          if (this.discard === '1'){
            // 使用中
            this.notepadListRun = data.records
          } else {
            // 废弃
            this.notepadListStop = data.records
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开弹出框，新增
       */
      openSaveNotepad(){
        this.$refs.notepadSaveUpdRef.openNotepadPage('save', null, this.notepadTypeList)
      },
      /**
       * 打开弹出框，修改
       * @param obj 记事本数据
       */
      openUpdNotepad(obj){
        this.$refs.notepadSaveUpdRef.openNotepadPage('upd', obj, this.notepadTypeList)
      },
      /**
       * 打开记事本详情
       * @param notepad 记事本数据
       */
      toOpenNotepadDetails(notepad){
        this.$refs.notepadDetailsRef.openNotepadDetailed(notepad)
      },
      /**
       * 重置
       */
      resetQueryNotepad(){
        this.searchParam = {
          title: null,
          content: null,
          importance: null,
          typeId: null,
        }
      },
      /**
       * 获取记事类型
       */
      getNotepadType(){
        http.get("/notepad/getNotepadType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.notepadTypeList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 设置颜色
       * @param importance 重要程度
       */
      setClass(importance){
        if (importance == null){
          // 绿色 #57B40D
          return 'no_important_no_emergency_note'
        } else if (0 === importance){
          // - #CD1D8A
          return "core_note"
        } else if (1 === importance){
          // #FE8787
          return "important_emergency_note"
        } else if (2 === importance){
          // #FD8F1E
          return "no_important_emergency_note"
        } else if (3 === importance){
          // #FCE407
          return "important_no_emergency_note"
        } else {
          return "no_important_no_emergency_note"
        }
      },
    },
    mounted(){
      this.$store.commit('navigationListChange', ['任务计划中心', '记事本'])
      this.getNotepadListPage()
      this.getNotepadType()
    }
  }
</script>

<style scoped>


  .box-card {
    /*width: 100%;*/
    max-height: 720px;
    height: 720px;
    margin-top: 10px;
  }


  /*便签start*/

  /*h2,p{*/
  /*  font-size:100%;*/
  /*  font-weight:normal;*/
  /*}*/
  .noteH2 .noteP{
    font-size:100%;
    font-weight:normal;
  }

  /*ul,li{*/
  /*  !*隐藏前面的小黑点*!*/
  /*  list-style:none;*/
  /*}*/
  .noteLi {
    /*隐藏前面的小黑点*/
    list-style:none;
  }

  /*ul{*/
  /*  overflow:hidden;*/
  /*}*/
  .noteUl {
    overflow:hidden;
  }

  /*ul li a{*/
  /*  !*去掉a标签的下划线*!*/
  /*  text-decoration:none;*/
  /*  color:#000;*/
  /*  background:#ffc;*/
  /*  display:block;*/
  /*  height:10em;*/
  /*  width:10em;*/
  /*  padding:1em;*/
  /*  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);*/
  /*  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);*/
  /*  box-shadow: 5px 5px 7px rgba(33,33,33,.7);*/
  /*  -moz-transition:-moz-transform .15s linear;*/
  /*  -o-transition:-o-transform .15s linear;*/
  /*  -webkit-transition:-webkit-transform .15s linear;*/
  /*}*/

  .noteDiv {
    background: #ffffff;
    padding: 2px
  }

  .noteA {
    /*去掉a标签的下划线*/
    text-decoration:none;
    color:#000;
    /*background:#ffc;*/
    /*background: linear-gradient(#FEAA54, #FD8F1E);*/
    display:block;
    height:16em;
    width:16em;
    padding: 10px;
    /*padding:1em;*/
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
  }


  /*ul li{*/
  /*  margin:1em;*/
  /*  !*浮动定位*!*/
  /*  float:left;*/
  /*}*/
  .noteLi {
    margin:1em;
    /*浮动定位*/
    float:left;
  }

  /*ul li h2{*/
  /*  !*标题大小*!*/
  /*  font-size:140%;*/
  /*  font-weight:bold;*/
  /*  padding-bottom:10px;*/
  /*}*/
  .noteH2 {
    /*标题大小*/
    font-size:120%;
    font-weight:bold;
    padding-bottom:10px;
  }

  /*ul li p{*/
  /*  !*字体*!*/
  /*  font-family:"Reenie Beanie",arial,sans-serif;*/
  /*  font-size:180%;*/
  /*}*/
  .noteP {
    /*字体*/
    font-family:"fzjljt",arial,sans-serif;
    font-size:180%;
  }

  ul li a{
    /*倾斜的代码*/
    /*-webkit-transform: rotate(-6deg);*/
    /*-o-transform: rotate(-6deg);*/
    /*-moz-transform:rotate(-6deg);*/
  }
  ul li:nth-child(even) a{
    /*间隔一个反方向歪*/
    /*-o-transform:rotate(4deg);*/
    /*-webkit-transform:rotate(4deg);*/
    /*-moz-transform:rotate(4deg);*/
    /*position:relative;*/
    /*top:5px;*/
    /*background:#cfc;*/
  }
  ul li:nth-child(3n) a{
    /*歪的代码*/
    /*-o-transform:rotate(-3deg);*/
    /*-webkit-transform:rotate(-3deg);*/
    /*-moz-transform:rotate(-3deg);*/
    /*position:relative;*/
    /*top:-5px;*/
    /*background:#ccf;*/
  }
  ul li:nth-child(5n) a{
    /*-o-transform:rotate(5deg);*/
    /*-webkit-transform:rotate(5deg);*/
    /*-moz-transform:rotate(5deg);*/
    /*position:relative;*/
    /*top:-10px;*/
  }
  /*ul li a:hover,ul li a:focus{*/
  /*  box-shadow:10px 10px 7px rgba(0,0,0,.7);*/
  /*  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);*/
  /*  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);*/
  /*  -webkit-transform: scale(1.25);*/
  /*  -moz-transform: scale(1.25);*/
  /*  -o-transform: scale(1.25);*/
  /*  position:relative;*/
  /*  z-index:5;*/
  /*}*/
  /*ol{text-align:center;}*/
  /*ol li{display:inline;padding-right:1em;}*/
  /*ol li a{color:#fff;}*/

  /*便签end*/



  /*便签的针帽,暂时不启用 start*/
  /* 上面的盖子 */
  .pin {
    --pin-color: #d02627;
    --pin-dark: #9e0608;
    --pin-light: #fc7e7d;

    /*定位*/
    position: absolute;
    left: 160px;
    top: 5px;
    width: 60px;
    height: 50px;
  }

  /* 针头下的阴影 */
  .shadow {
    position: absolute;
    top: 18px;
    left: -8px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: radial-gradient(var(--paper-shadow), 20%, rgba(201, 191, 141, 0));
  }

  /* 便签的针 */
  .metal {
    position: absolute;
    width: 5px;
    height: 20px;
    background: linear-gradient(to right, #808080, 40%, #eae8e8, 50%, #808080);
    border-radius: 0 0 30% 30%;
    transform: rotate(50deg);
    transform-origin: bottom left;
    top: 15px;
    border-bottom: 1px solid #808080;
  }

  /* 便签针帽一级 */
  .bottom-circle {
    position: absolute;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--pin-color);
    background: radial-gradient(circle at bottom right,
    var(--pin-light),
    25%,
    var(--pin-dark),
    90%,
    var(--pin-color));
  }

  /* Barrel */
  /* .bottom-circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 20px;
    height: 30px;
    transform: rotate(55deg);
    transform-origin: 100% 100%;
    border-radius: 0 0 40% 40%;
    background: linear-gradient(to right,
        var(--pin-dark),
        30%,
        var(--pin-color),
        90%,
        var(--pin-light));
  } */

  /* 便签针上面的红色帽子二级*/
  .bottom-circle::after {
    content: "";
    position: absolute;
    right: -10px;
    top: -5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(circle at right,
    var(--pin-light),
    30%,
    var(--pin-color),
    var(--pin-dark) 80%);
  }
  /*便签的针帽 end*/


  /*渐变色，便签颜色，让便签更好看一点*/

  /*http://www.hepou.com/peise/zhongguo.html*/
  /*核心级的重要事情*/
  .core_note {
    /*background: linear-gradient(#E240AD, #CD1D8A);*/
    background: linear-gradient(#f47983, #db5a6b);
  }
  /*重要紧急*/
  .important_emergency_note {
    /*background: linear-gradient(#FDADAE, #FE8787);*/
    background: linear-gradient(#ffa631, #ffa400);
  }
  /*不重要但紧急*/
  .no_important_emergency_note {
    /*background: linear-gradient(#FEAA54, #FD8F1E);*/
    background: linear-gradient(#b0a4e3, #cca4e3);
  }
  /*重要但不紧急*/
  .important_no_emergency_note {
    /*background: linear-gradient(#FEEF63, #FCE407);*/
    background: linear-gradient(#afdd22, #a3d900);
  }
  /*不重要不紧急*/
  .no_important_no_emergency_note {
    /*background: linear-gradient(#85E931, #57B40D);*/
    background: linear-gradient(#e0f0e9, #e0eee8);
  }


</style>
